<template>
  <el-dialog :title="title" :visible.sync="openDialog" @close="close">
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <el-form ref="addform" :model="form" label-suffix="：" :rules="rules" label-position="right" label-width="120px">
          <el-form-item label="角色类型" prop="role">
            <div class="flex-has">
              <el-select v-model="form.role" placeholder="请选择角色类型">
                <el-option v-for="item in roleOption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <span style="width:120px;text-align:center">状态:</span>
              <el-select v-model="form.state" placeholder="请选择状态">
                <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="营业执照" prop="img">
            <image-upload ref="upimg" v-model="form.img" :width="500" :height="350" />
          </el-form-item>
          <div class="flex-has">
            <el-form-item label="身份证正面照" prop="card_img1">
              <image-upload ref="upimg" v-model="form.card_img1" :width="500" :height="350" />
            </el-form-item>
            <el-form-item label="身份证反面照" prop="card_img1">
              <image-upload ref="upimg" v-model="form.card_img2" :width="500" :height="350" />
            </el-form-item>
          </div>

          <el-form-item label="电话" prop="tel">
            <el-input v-model="form.tel" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" prop="area">
            <el-input v-model="form.area" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户名称" prop="account_name">
            <el-input v-model="form.account_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank">
            <el-input v-model="form.bank" autocomplete="off" />
          </el-form-item>
          <el-form-item label="账号" prop="card">
            <el-input v-model="form.card" autocomplete="off" />
          </el-form-item>
          <el-form-item label="服务范围" prop="service_area">
            <el-input v-model="form.service_area" autocomplete="off" />
          </el-form-item>
          <el-form-item label="待结款" prop="kaid">
            <el-input v-model="form.kaid" autocomplete="off" disabled />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="openDialog = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { api_addAndUpdate } from '@/api/query'
export default {
  data() {
    return {
      id: '',
      title: '新增角色信息',
      openDialog: false,
      form: {
        state: 1,
        role: '',
        name: '',
        img: '',
        card_img1: '',
        card_img2: '',
        tel: '',
        email: '',
        area: '',
        bank: '',
        card: '',
        account_name: '',
        service_area: '',
        kaid: ''
      },

      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        role: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        bank: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
        card: [{ required: true, message: '请输入开户行账号', trigger: 'blur' }]
      },
      roleOption: [
        { value: 1, label: '管理员' },
        { value: 2, label: '供应商' },
        { value: 3, label: '工人' },
        { value: 4, label: '管家' },
        { value: 5, label: '设计师' }
      ],
      stateOption: [
        { value: 1, label: '有效' },
        { value: 2, label: '无效' },
        { value: 3, label: '暂停' },
        { value: 4, label: '审核中' }
      ]

    }
  },
  computed: {
    queryData() {
      const obj = this.form
      obj.id = this.id
      return obj
    }
  },
  methods: {
    // 上传完成
    uploadSuccess(val, url) {
      console.log(val, '测试文件上传')
    },
    openImgdailog() {
      this.$nextTick(() => {
        this.$refs.upimg.init() // 传入图片类型参数
      })
    },
    init(val) {
      console.log(val)
      this.openDialog = true
      if (val) {
        this.title = '修改角色信息'
        this.id = val.id
        this.form = val
      } else {
        this.title = '新增角色信息'
        this.id = ''
      }
    },

    close() {
      this.$refs.addform.resetFields()
      this.form = this.$options.data().form
    },
    save() {
      console.log(this.queryData, 456)
      this.$refs.addform.validate((valid) => {
        if (valid) {
          api_addAndUpdate('/role/save/', this.queryData).then((res) => {
            if (res) {
              this.openDialog = false
              this.$emit('save', '提交')
              this.$operateTip()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
